<template>
    <div class="firmIn">
        <div class="bgc_firstBox">
          <div class="first_btn warp">
            <img src="@/assets/firmIn/in_btn.png" alt=""/>
          </div>
        </div>
        <div class="tit_secondWord warp">
          <div class="secondWord_line">
            <span class="line_one">
              当今时代 如何彻底打破委托 
            </span>
            <span class="line_two">处置新困境</span>
            <img src="@/assets/firmIn/hytd_btn.png" alt="">
          </div>
          <p class="secondWord_new"> How&nbsp; to&nbsp; thoroughly&nbsp; break&nbsp; the&nbsp; new&nbsp;dilemma&nbsp; of&nbsp; entrusted&nbsp; disposal</p>
        </div>
        <div class="card_third_box warp">
          <el-card v-for="item in investmentList" :key="item.id" :body-style="{ padding: '0px' }" shadow="hover">
            <img :src="item.img" class="image" alt="">
            <div class="card_con" :style="`background: url(${item.bgc}) 164px 0 no-repeat`">
              <p class="con_tit">{{item.tit}}</p>
              <p class="con_content">
                {{item.content}}
              </p>
            </div>
          </el-card>
        </div>
        <!-- 雪山背景图入驻 -->
        <div class="bgc_fourth_box">
          <div class="fourth_box warp">
            <img src="@/assets/firmIn/jjfa_btn.png" alt=""/>
          </div>
          <div class="fourth_box_card warp">
            <div class="f_box_card" v-for="item in iconSmallList" :key="item.id">
              <img class="f_img_icon" :src="item.icon" alt="">
              <el-card shadow="hover">
                <div class="f_c_title">
                  <img :src="item.icon" alt="">
                  <span>{{item.title}}</span>
                </div>
                <p class="f_c_con">
                  {{item.content}}
                </p>
              </el-card>
            </div>
          </div>
          <div class="f_box_btn warp">
            <img src="@/assets/firmIn/in_btn.png" alt="">
          </div>
        </div>
        <!-- 网页，移动端图片展示 -->
        <div class="fifth_box warp">
          <div class="f_b_tit">
            <p class="tit_l1">
              多样服务 平台全面覆盖用户
              <span class="money">
                1000w+
              </span>
                回收商
            </p>
            <p class="tit_samll">
              THE MULTI PLATFORM SERVICE FULLY COVERS MORE THAN 1000 RECYCLERS IN ONLY ONE YEAR
            </p>
          </div>
          <div class="f_b_content">
            <div class="con_png">
              <img src="@/assets/firmIn/jt_img.png" alt="">
            </div>
            <div class="con_money">
              <p>盟拍网平台仅在一年时间内，已完成APP、小程序、H5、PC多端开发专注于服务基建工程、钢铁、电力、化工、通信、汽车制造、机械制造等行业</p>
              <el-row class="row_one">
                <el-col :span="8"><span>300+</span></el-col>
                <el-col :span="8"><span>1000W+</span></el-col>
                <el-col :span="8"><span>378.28亿</span></el-col>
              </el-row>
              <el-row class="row_two">
                <el-col :span="8"><span>委托企业</span></el-col>
                <el-col :span="8"><span>回收商</span></el-col>
                <el-col :span="8"><span>处置金额</span></el-col>
              </el-row>
              <img src="@/assets/firmIn/in_btn.png" alt="">
            </div>
          </div>
        </div>
        <div class="sixth_box">
          <div class="s_b_enterprise warp">
            <div class="b_enter_one">
              <p>海量企业 百余家国企、央企、事业单位战略合作</p>
              <p>STRATEGIC COOPERATION OF MORE THAN 100 STATE-OWNED ENTERPRISES, CENTRAL ENTERPRISES AND INSTITUTIONS</p>
            </div>
            <div class="b_enter_card">
              <el-card shadow="hover" v-for="item in iconBigList" :key="item.id">
                  <img :src="item.icon" alt="">
                  <p class="card_header">{{item.title}}</p>
                  <p class="card_body">{{item.content}}</p>
              </el-card>
            </div>
            <div class="b_enter_icons">
              <div class="icon_card" v-for="item in logoCardList" :key="item.id">
                <img :src="item.logo" alt="">
                <p>
                  {{item.content}}
                </p>
              </div>
            </div>
            <div class="logo_firm">
              <img v-for="(item,i) in logoList" :key="i" :src="item" alt="">
            </div>
          </div>
        </div>
        <div class="seventh_serve">
          <div class="s_serve_tip warp">
            <div class="tip_left">
              <p class="t_left_titleBig">
                多样服务 平台全面覆盖用户 
                <span>1000W+</span>
                回收商
              </p>
              <p class="t_left_small">THE MULTI PLATFORM SERVICE FULLY COVERS MORE THAN 1000 RECYCLERS IN ONLY ONE YEAR</p>
            </div>
            <div class="rigth_form">
                <div class="title-container">
                    <p>留下您的信息 我们即刻与您取得联系</p>
                </div>
                <el-form
                    ref="userForm"
                    :model="userForm"
                    class="login_form"
                    >
                    <el-form-item>
                      <!-- el-icon-s-home -->
                      <el-input 
                      prefix-icon="el-icon-s-home"
                      v-model="userForm.name" 
                      placeholder="企业名称"
                      type="text"/>
                    </el-form-item>
                    <el-form-item prop="firmName">
                        <el-input
                        prefix-icon="el-icon-user"
                        v-model="userForm.username"
                        placeholder="联系人"
                        type="text"
                        clearable
                        />
                    </el-form-item>
                    <el-form-item prop="mobile">
                        <el-input prefix-icon="el-icon-mobile-phone" v-model="userForm.mobile" placeholder="请输入联系人手机号"></el-input>
                    </el-form-item>
                    <el-form-item  prop="code">
                      <el-input prefix-icon="el-icon-chat-line-square" placeholder="请输入验证码" v-model="userForm.code">
                          <el-button slot="append" :disabled="disabled" @click="sendCode">{{ countDown }}</el-button>
                      </el-input>
                    </el-form-item>
                </el-form>
                <div class="btn_form">立 即 提 交</div>
            </div>
          </div>
        </div>
    </div>
</template>
<script>
import {getCode} from '@/api/user'
import img from '@/assets/firmIn/two_zs_img.png'
 export default {
    data() {
      return {
        investmentList:[    //card_yq
          {
            id:'1',
            img: require('@/assets/firmIn/two_yq_img.png'),
            bgc:require('@/assets/firmIn/01.png'),
            tit:'疫情期间无法组织拍卖会',
            content:'线下拍卖往往准备场地、拍卖师和租借现场设备等，容易引发病毒的接触感染'
          },
          {
            id:'2',
            img: require('@/assets/firmIn/two_zs_img.png'),
            bgc:require('@/assets/firmIn/02.png'),
            tit:'招商局限',
            content:'传统拍卖会仅能吸引当地竟买人报名参与,另外必须到场才能参与竟拍'
          },
          {
            id:'3',
            img: require('@/assets/firmIn/two_xxbd_img.png'),
            bgc:require('@/assets/firmIn/03.png'),
            tit:'信息不对称无法组织拍卖会',
            content:'行业资源信息仅在小圈子内流通，无法被更多的竟买人获知'
          },
          {
            id:'4',
            img: require('@/assets/firmIn/two_cb_img.png'),
            bgc:require('@/assets/firmIn/04.png'),
            tit:'围标、串标',
            content:'一些传统拍卖中很容易出现暗箱操作导致保底价被泄露等问题'
          },
        ],
        iconSmallList:[
          {
            id:'1',
            title:'"互联网 + " 拍卖模式',
            content:'运用先进的互联网技术，与传统行业相融合，对传统行业进行优化升级完善，响应国家号召',
            icon:require('@/assets/firmIn/pmms_icon.png'),
          },{
            id:'2',
            title:'缩短周期和人工物力成本',
            content:'线上运营开展，打破时间和地域上的界限，借助互联网，全国各地意向竞买人均可参加',
            icon:require('@/assets/firmIn/sdzq_icon.png'),
          },{
            id:'3',
            title:'公开透明',
            content:'按照合规拍卖流程把标的物的相关信息实时上传到后台，线上展示推广，实现物资同等',
            icon:require('@/assets/firmIn/gktm_icon.png'),
          },{
            id:'4',
            title:'全网监督',
            content:'全程的数据记录受公众监督，有效抑制了传统线下拍卖中的提前串通等现象',
            icon:require('@/assets/firmIn/qwjd_icon.png'),
          },
        ],
        iconBigList:[
          {
            id:'1',
            title:'资产保值增值',
            content:'统一管理，统一处置，招商打破区域限制，使企业废旧资产获得最大化的保值增值',
            icon:require('@/assets/firmIn/big_zz_icon.png'),
          },{
            id:'2',
            title:'高效处置',
            content:'废旧资产集中处置一站式服务，减少贵公司人力、物力、财力成本，使废旧资产处置更高效',
            icon:require('@/assets/firmIn/big_gx_icon.png'),
          },{
            id:'3',
            title:'公开监督',
            content:'公开、公平、公正的拍卖平台，各环节透明化，便于企业监督管理 ',
            icon:require('@/assets/firmIn/big_gk_icon.png'),
          },{
            id:'4',
            title:'优质服务',
            content:'处置过程中，全程跟踪，实时做好企业与竞买人之间的桥梁，真正做到客户优先',
            icon:require('@/assets/firmIn/big_yz_icon.png'),
          },

        ],
        logoCardList:[
          {
            id:'1',
            content:'我公司现阶段已与中铁集团下属企业：中铁五局、中铁七局、中铁十局、中铁大桥局、中铁电气化局等多个局合作处置废旧资产，帮助中铁各局快速处理基建过程中产生的废旧资产。',
            logo:require('@/assets/firmIn/ChineseRailway.png'),
          },{
            id:'2',
            content:'我公司现阶段已与中铁建集团下属企业：中铁建十一局、中铁建十七局、中铁建 十八局、中铁建二十局、中铁建二十二局、中铁建大桥局等多个单位合作处置 废旧资产，帮助中铁建各局快速处理基 建过程中产生的废旧资产。',
            logo:require('@/assets/firmIn/chineseTj.png'),
          },{
            id:'3',
            content:'我公司现阶段已与中国交建旗下中交一公局、中交四公局合作处置废旧资产，帮助中交合作单位提高废旧物资处置效率，使资产保值增值，得到了企业领导极高的认可。',
            logo:require('@/assets/firmIn/chineseJJ.png'),
          },{
            id:'4',
            content:'我公司现阶段已与中冶集团下属企业：中国五冶、中国十冶、中国十二冶等多单位合作处置废旧资产，帮助中冶快速处理基建过程中产生的废旧资产。',
            logo:require('@/assets/firmIn/chineseZY.jpeg'),
          },
        ],
        logoList:[
          require('@/assets/firmIn/logo_jy.png'),
          require('@/assets/firmIn/logo_dj.png'),
          require('@/assets/firmIn/logo_nj.png'),
          require('@/assets/firmIn/logo_ly.png'),
          require('@/assets/firmIn/logo_hx.png'),
          require('@/assets/firmIn/logo_hn.png'),
          require('@/assets/firmIn/logo_sd.png'),
          require('@/assets/firmIn/logo_ck.png'),
        ],
        userForm:{
          name:'',
          firmName:'',
          password:'',
          mobile:'',
          code:""
        },
        disabled:false,
        time:0,
        countDown: "获取验证码",
      };
    },
    methods: {
      //点击获取验证码
      sendCode(){
        if (!this.userForm.mobile) {
            //号码校验不通过
            this.$message({
            message: '请输入手机号',
            type:'warning',
            });
            //正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
        } else if (!/1[35789]\d{9}/.test(this.userForm.mobile)) {
            // 失去焦点后自动触发校验手机号规则
        } else {
            this.time = 60;
            this.disabled = true;
            //调用倒计时方法
            this.timer();
            getCode({mobile:this.userForm.mobile}).then(res=>{
                this.$message({
                    message: res.msg,
                    type: 'success'
                })
            })
        }
      },
      timer() {
        if (this.time > 0) {
            this.time--;
            this.countDown = "已发送" + this.time + 's';
            setTimeout(this.timer, 1000);
        } else {
            this.time = 0;
            this.countDown = "获取验证码";
            this.disabled = false;
        }
      },
    }
  }
</script>


<style scoped lang="less">
.firmIn{
  // 企业入驻大背景图
  .bgc_firstBox{
    margin:0px;
    min-height: 600px;
    background: url('@/assets/firmIn/firmIn_bgc.png') no-repeat;
    background-size:100% auto;
    .first_btn{
      position: relative;
      img{
        position: absolute;
        top: 300px;
        left: 50px;
        width: 226px;
        height: 86px;
      }
    }
  }
  // 行业痛点
  .tit_secondWord{
    margin-top: 100px;
    .secondWord_line{
      font-size: 34px;
      position: relative;
      .line_two{
        margin-left: 20px;
        color: #DF0000;
      }
      img{
        height: 70px;
        width: 539px;
        position: absolute;
        right: 0;
      }
    }
    .secondWord_new{
      font-size: 14px;
      color: #A3AAB5;
      letter-spacing: 1px;
    }
  }
  // card
  .card_third_box{
    display: flex;
    justify-content: space-between;
    height: 330px;
    margin-top: 80px;
    .el-card{
      width: 285px;
      height: 400px;
      border-radius: 11px;
      img{
        vertical-align:middle;
      }
      .card_con{
        background-position: right top;
        height: 80px;
        .con_tit{
          padding-top: 25px;
          font-size: 18px;
          margin-left: 14px;
          font-weight: bold;
          color: #333333;
        }
        .con_content{
          font-size: 14px;
          margin-left: 14px;
          margin-top: 15px;
          color: #555555;
        }
      }
    }
    .el-card:hover{
      border: 1px solid #ED2B2B;
      .con_tit{
        color: #ED2B2B;
      }
    }
  }
  // 雪山背景图
  .bgc_fourth_box{
    margin:0px;
    min-height: 600px;
    background: url('@/assets/firmIn/bgc_mountain.png') no-repeat;
    background-size:100% auto;
    .fourth_box{
      position: relative;
      img{
        width: 542px;
        height: 75px;
        position: absolute;
        top: 90px;
        right: 0;
      }
    }
    .fourth_box_card{
      display: flex;
      justify-content: space-between;
      padding-top: 160px;
      .f_box_card{
        width: 286px;
        .f_img_icon{
          margin:16px; 
        }
        .el-card{
          height: 158px;
          border-radius: 11px;
          .f_c_title{
            padding-bottom: 20px;
            img{
              margin-right: 10px;
              vertical-align: middle;
            }
            span{
              font-size: 18px;
              font-weight: bold;
            }
          }
          .f_c_con{
            color: #777777;
            font-size: 14px;
          }
        }
      }
    }
    .f_box_btn{
      margin-top: 50px;
      text-align: center;
        img{
          width: 226px;
          height: 90px;
        }
      }
  }
  // 网页移动端，图片展示
  .fifth_box{
    margin-top: 20px;
    .f_b_tit{
      text-align: center;
      .tit_l1{
        font-size: 34px;
        .money{
          color: #DF0000;
        }
      }
      .tit_samll{
        color: #777777;
      }
    }
    .f_b_content{
      display: flex;
      justify-content: space-between;
      margin-top: 60px;
      .con_png{
        img{
          width: 604px;
        }
      }
      .con_money{
        width: 500px;
        p{
          font-size: 16px;
          font-weight: bold;
          color: #333333;
        }
        .row_one{
          font-size: 36px;
          color: #e03e2d;
          margin-top: 30px;
        }
        .row_two{
          font-size: 16px;
          font-weight: bold;
          color: #555555;
          margin-top: 10px;
        }
        img{
          width: 166px;
          height: 76px;
          margin-top: 40px;
        }
      }
    }
  }
  // 第三个大背景图
  .sixth_box{
    margin-top: 50px;
    background: url('@/assets/firmIn/hz_bg_pic.png') no-repeat;
    background-size:100% auto;
    .s_b_enterprise{
      .b_enter_one{
        p:first-child{
          color: #EEEEEE;
          font-size: 34px;
          padding-top: 90px;
        }
        p:last-child{
          color: #FFFFFF;
          font-size: 12px;
          padding-top: 15px;
        }
      }
      .b_enter_card{
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
        .el-card{
          width: 280px;
          height: 280px;
          text-align: center;
          border-radius: 12px;
          .card_header{
            font-size: 16px;
            padding-top: 10px;
            font-weight: bold;
          }
          .card_body{
            font-size: 14px;
            margin-top: 20px;
          }
        }
        .el-card:hover{
          cursor:pointer;
          /* transform属性 */
          transform:translate(0,-20px);
          /* 第一个参数指定X轴的位移量,必填, 第二个参数指定Y轴的位移量,不必填 默认0*/
          -webkit-box-shadow: #ccc 0px 10px 10px;
            -moz-box-shadow: #ccc 0px 10px 10px;
            box-shadow: #ccc 0px 10px 10px;
        }
      }
      .b_enter_icons{
        margin-top: 170px;
        display: flex;
        justify-content: space-between;
        .icon_card{
          background: url(@/assets/firmIn/tl_bg_card.png);
          width: 225px;
          height: 305px;
          border: 1px solid #eee;
          border-radius: 12px;
          padding: 30px;
          text-align: center;
          img{
            margin: 20px 0;
            width: 100px;
            height: 100px;
          }
          p{
            color: #777777;
            font-size: 14px;
            margin-top: 16px;
          }
        }
      }
      .logo_firm{
        display: flex;
        justify-content: space-between;
        margin-top: 70px;
        img{
          width: 106px;
          height: 106px;
        }
      }
    }
  }
  // 客服背景图
  .seventh_serve{
    background: url('@/assets/firmIn/serve_bg.png') no-repeat;
    background-position:left bottom; 
    height: 500px;
    .s_serve_tip{
      display: flex;
      justify-content: space-between;
      margin-top: 100px;
      .tip_left{
        .t_left_titleBig{
          font-size: 30px;
          span{
            color: #DF0000;
          }
        }
        .t_left_small{
          font-size: 13px;
          margin-top: 10px;
          color: #777777;
        }
      }
      .rigth_form{
        padding: 25px 30px;
        background-color: #fff;
        box-shadow: 0 3px 6px -1px rgb(0 0 0 / 19%);
        box-sizing: border-box;
        border-radius: 12px;
        width: 400px;
        overflow: hidden;
        background: #ffffff;
        .title-container{
          margin-bottom: 20px;
          text-align: center;
          font-size: 18px;
        }
        .btn_form{
          width: 100%;
          height: 48px;
          line-height: 48px;
          background-image: linear-gradient(to bottom right, #fa824a, #ED2B2B);
          border-radius: 4px;
          text-align: center;
          color: #fff;
          font-weight: bold;
        }
      }
    }
  }
}
  

</style>